<style>
    #app cite {
        position: relative;
        padding: 10px 0px;
        display: block;
        color: #666;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 18px;
        text-align: center;
    }

    img {
        object-fit: cover;
        /* 添加过渡效果 */
    }

    .vertical {
        width: 100%;
        max-height: 480px;
    }

    .horizontal {
        width: 100%;
        max-height: 240px;
    }

    .video {
        transition: transform 0.3s ease-in-out;
    }

    .video:hover {
        transform: scale(1.1);
        /* 鼠标滑动时放大到1.1倍 */
        cursor: pointer;
        /* 鼠标指针变为手形指针 */
    }
</style>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" style="text-align: center;">
        <!-- 头部区域 -->

        <div class="" style="padding: 11px 0 0 30px; text-align: center;">
            <h3 style="font-size: 18px;">宝安职业技术学校集训风采</h3>
        </div>

    </div>

    <div id="app" style="max-width:1800px; margin: 0 auto; margin-top: 50px; ">
        <div class="layui-fluid layadmin-shortcut">

            <div class="layui-row layui-col-space15">

                <div class="layui-col-md12 ">
                    <div class="layui-card">

                        <div class="layui-card-body" style="min-height: 800px;padding: 20px 15px;">
                            <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
                                <el-tab-pane :label="tab.name" :value="tab.id" v-for="tab in timeList">

                                </el-tab-pane>

                                <el-tabs v-model="activeTab" @tab-click="tabClick" stretch>
                                    <el-tab-pane :label="tab.name" :value="tab.id" v-for="tab in tabList"
                                        style="width: 120px;">
                                    </el-tab-pane>
                                    <div class="layui-row layui-col-space30">
                                        <div class="layui-col-xs4 layui-col-md3 video" v-for="item in dataList"
                                            :key="item.id">
                                            <a href="javascript:;" @click="goto(item)">
                                                <img :src="getimg(item)"
                                                    :class="{'vertical': tabShowTba === 1, 'horizontal': tabShowTba === 2}" />
                                                <cite>{{ item.studentName }}</cite>
                                            </a>
                                        </div>
                                    </div>
                                </el-tabs>
                            </el-tabs>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    //若需用到 layui 组件，layui.use 需写在该全局方法里面，如：
    layui.use(['admin', 'fileServiceApi', 'view'], function () {

        var admin = layui.admin;
        var fileServiceApi = layui.fileServiceApi;
        var view = layui.view;


        var myApp = new Vue({
            el: '#app',
            data: function () {
                return {
                    activeName: 0,
                    activeTab: 0,
                    tabShowTba: 1,
                    timeList: [],
                    tabList: [],
                    dataList: []
                }
            }
            , methods: {
                goto(data) {
                    //location.hash = '/video/play/id=' + data.id;
                    var hash = '#/video/play/id=' + data.id;

                    // 获取当前页面的 URL
                    var currentUrl = window.location.href;

                    // 移除当前 URL 中的哈希部分（如果存在）
                    var baseUrl = currentUrl.split('#')[0];

                    // 构建完整的 URL
                    var fullUrl = baseUrl + hash;

                    // 在新标签页中打开该 URL
                    window.open(fullUrl, '_blank');
                },
                async getData() {
                    let re = await fileServiceApi.getTimeTabList();
                    this.timeList = re.data;
                    if (this.timeList.length == 0) {
                        return;
                    }

                    re = await fileServiceApi.getShowTabList(myApp.timeList[0].id);
                    this.tabList = re.data;

                    re = await fileServiceApi.getVideoList(myApp.tabList[0].id);
                    this.dataList = re.data;
                },
                async handleClick(tab) {
                    let re = await fileServiceApi.getShowTabList(this.timeList[this.activeName].id);
                    this.tabList = re.data;

                    if (this.tabList.length == 0) {
                        this.dataList = [];
                        return;
                    }
                    re = await fileServiceApi.getVideoList(myApp.tabList[0].id);
                    this.dataList = re.data;
                },

                async tabClick(tab) {
                    let re = await fileServiceApi.getVideoList(this.timeList[this.activeTab].id);
                    this.dataList = re.data;
                },
                getGroups() {
                    this.groups.map(x => {
                        x.chapterData = this.chapters.filter(y => y.groupId == x.id);
                    })

                },
                getimg(item) {
                    if (item.videoImg == "") {
                        return '/video/base.jpg';
                    }
                    return '/video/' + item.img;
                }

            },
            mounted: function () {
                this.getData();
            },
            created: function () {

            },


        });

    });

</script>